/**
 *   webpack配置文件   
 */
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
    mode:'development', //开发模式配置
    entry:path.join(__dirname,'./src/main.js'), //入口文件
    //输出文件
    output:{
        filename:'development.js', // 输出文件名字
        path : path.join(__dirname,'dist') //输出路径
    },
    
    module:{
        rules:[{
            test:/\.(js|jsx)$/, //匹配js或者jsx结尾的文件
            loader:'babel-loader', // 使用这个loader进行解析
            exclude :/node_modules/,//排除包文件  要不然会报错
        },{
            test:/\.css$/, //匹配js或者jsx结尾的文件
            use:['style-loader','css-loader'],
        }]
    },
   // 插件配置 
    plugins:[
        //配置生成html文件 通过html-webpack-plugin这个包来完成
        new HtmlWebpackPlugin({
            template:path.join(__dirname,'./public/index.html') // 需要用到的模板文件
        })
    ],
    // 生成一个本地服务器并且实现热更新  需要安装webpack-dev-server 
    devServer:{
        contentBase:path.join(__dirname,'dist'), //项目构建后的路径
        compress:true, //启动gzip压缩
        port:3001, //端口号
        open:true, //自动打开默认浏览器
    },
    // 解决项目中一系列问题
    resolve:{
        extensions:['.js','.jsx','.json','.css'],//以这些扩展名结尾的文件可以省略扩展名
        // 配置路径别名
        alias:{
            '@':path.join(__dirname,'src'),
        }
    }
}